<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div ng-controller="CreateNonFullSupplyController" xmlns="http://www.w3.org/1999/html">
<div id="pageErrors" class="page-errors" ng-show="errorPages.nonFullSupply">
  <div ng-switch on="errorPages.nonFullSupply.length" class="dropdown">
    <a href="" ng-switch-when="1" class="dropdown-toggle" openlmis-message="error.one.page"></a>
    <a href="" ng-switch-default class="dropdown-toggle"
       openlmis-message="error.multiple.pages|nonFullSupplyErrorPagesCount">
    </a>
    <ul class="dropdown-menu">
      <li ng-repeat="page in errorPages.nonFullSupply">
        <a href="" ng-click="goToPage(page, $event)">{{page}}</a>
      </li>
    </ul>
  </div>
</div>

<div class="clearfix">
  <br/>
  <input id="showNonFullSupplyModal" type="button" ng-click="showAddNonFullSupplyModal()"
         class="pull-right btn btn-primary"
         ng-disabled="formDisabled || !(addNonFullSupplyLineItemButtonShown)" openlmis-message="button.add"/>
</div>

<div class="rnr-table" tab-scroll bottom-offset="180" ng-show="page.nonFullSupply.length" adjust-height>
  <div class="float-left left-table">
    <table id="nonFullSupplyFrozenTable" class="table table-bordered scrollable" fixed-table-header>
      <thead>
      <tr>
        <th class="col-{{column.name}}" ng-repeat="column in visibleColumns.nonFullSupply.fixed"
            ng-bind="column.label"></th>
      </tr>
      </thead>
      <tbody ng-repeat="rnrLineItem in page.nonFullSupply">
      <tr>
        <td id="category_{{ $index }}" class="productCategory"
            colspan="{{visibleColumns.nonFullSupply.scrollable.length}}"
            ng-show="showCategory($index)"
            ng-bind="rnrLineItem.productCategory"></td>
      </tr>
      <tr ng-class="getRowErrorClass(rnrLineItem)">
        <td class="cell-input col-{{column.name}}" ng-repeat="column in visibleColumns.nonFullSupply.fixed">
          <span ng-bind="rnrLineItem[column.name]" id="{{column.name}}_{{$parent.$index}}" class="cell-text">
          </span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="float-left right-table" custom-horizontal-scroll>
    <table id="nonFullSupplyTable" class="table table-bordered scrollable" fixed-table-header>
      <thead>
      <tr>
        <th class="col-{{column.name}}" ng-repeat="column in visibleColumns.nonFullSupply.scrollable"
            ng-bind="column.label"></th>
      </tr>
      </thead>
      <tbody ng-repeat="rnrLineItem in page.nonFullSupply">
      <tr>
        <td class="productCategory" colspan="{{visibleColumns.nonFullSupply.scrollable.length}}"
            ng-show="showCategory($index)">&nbsp;</td>
      </tr>
      <tr>
        <td class="cell-input col-{{ column.name }}"
            ng-repeat="column in visibleColumns.nonFullSupply.scrollable">
          <ng-switch on="column.name">
              <span ng-switch-when="remarks">
                <input ng-disabled="formDisabled" id="{{getId(column.name, $parent)}}" type="text"
                       name="remarks{{rnrLineItem['id']}}"
                       ng-model="rnrLineItem[column.name]"
                       maxlength="250"/>
              </span>

              <span ng-switch-when="quantityRequested" class="position-relative">
                <input ng-disabled="formDisabled" id="{{getId(column.name, $parent)}}" type="text"
                       name="quantityRequested{{rnrLineItem['productCode']}}" ng-model="rnrLineItem.quantityRequested"
                       ng-required="true" ng-class="highlightRequired(showError, rnrLineItem[column.name])"
                       numeric-validator="positiveInteger" maxlength="8" ng-change="rnr.fillPacksToShip(rnrLineItem)"
                       ng-trim="false"/>
                <span class="rnr-form-error" id="quantityRequested{{rnrLineItem['productCode']}}"
                      style="display:none;" openlmis-message="error.number.only">
                </span>
              </span>

              <span class="reasonForRequestedQuantityContainer" ng-switch-when="reasonForRequestedQuantity">
                <input ng-disabled="formDisabled" id="{{getId(column.name, $parent)}}" type="text"
                       name="reasonForRequestedQuantity{{rnrLineItem['id']}}"
                       ng-model="rnrLineItem[column.name]"
                       ng-required="true"
                       ng-class="highlightRequired(submitError && rnrLineItem.quantityRequested, rnrLineItem.reasonForRequestedQuantity, rnrLineItem.skipped) ||
                                 highlightWarning(!submitError && rnrLineItem.quantityRequested, rnrLineItem.reasonForRequestedQuantity)"
                       maxlength="250"/>
                <span ng-class="{'rnr-form-error': submitError, 'alert alert-warning warning-alert': !submitError}"
                      openlmis-message="error.reason.required"
                      ng-show="rnrLineItem.quantityRequested && !rnrLineItem.reasonForRequestedQuantity">
                </span>
              </span>
              <span ng-switch-when="price">
                <span ng-bind="rnrLineItem[column.name] | currency:currency" id="{{getId(column.name, $parent)}}"
                      class="cell-text"></span>
              </span>
              <span ng-switch-when="cost">
                <span ng-bind="rnrLineItem[column.name] | currency:currency" id="{{getId(column.name, $parent)}}"
                      class="cell-text"></span>
              </span>
              <span ng-switch-when="lossesAndAdjustments">
                <span ng-bind="rnrLineItem['totalLossesAndAdjustments']" class="cell-text"></span>
              </span>

              <span ng-switch-default>
                <span ng-bind="rnrLineItem[column.name]" id="{{getId(column.name, $parent)}}" class="cell-text"></span>
              </span>

          </ng-switch>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="clear-both"></div>
</div>

<form name="nonFullSupplyForm">
  <div id="nonFullSupplyProductsModal" modal="nonFullSupplyProductsModal"
       options="{ backdrop: 'static', escape: false}">
    <div class="modal-header"><h3 openlmis-message="label.rnr.add.non.full.supply"></h3></div>
    <div class="modal-body">

      <div class="row-fluid">
        <div class="span7">
          <label for="nonFullSupplyProductsCategory">
            <span openlmis-message="label.category"></span>&colon;
          </label>
          <select ui-select2 class="span11 bottom-spacer" id="nonFullSupplyProductsCategory"
                  ng-model="nonFullSupplyProductCategory" name="productName"
                  openlmis-message="placeholder.select.category"
                  ng-options="nonFullSupplyProductCategory.name for nonFullSupplyProductCategory in nonFullSupplyProductsCategories"
                  ng-change="updateNonFullSupplyProductsToDisplay(); clearNonFullSupplyProductModalData()">
            <option></option>
          </select>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span7">
          <label for="nonFullSupplyProductsCodeAndName" openlmis-message="label.product.code"></label>
          <select ui-select2="{formatNoMatches: formatNoMatches}" class="span11 bottom-spacer"
                  id="nonFullSupplyProductsCodeAndName"
                  ng-model="facilityApprovedProduct" name="productCode"
                  openlmis-message="placeholder.select.product"
                  ng-options="facilityTypeApprovedProduct.programProduct.product.code+' | '+facilityTypeApprovedProduct.programProduct.product.primaryName for facilityTypeApprovedProduct in nonFullSupplyProductsToDisplay">
            <option></option>
          </select>
        </div>
      </div>

      <div class="row-fluid">
        <div class="span4">
          <label for="quantityRequested"><span
            ng-bind="labelForRnrColumn('quantityRequested')"></span></label>
          <input type="text" class="span12 right-justified" name="newNonFullSupply.quantityRequested"
                 ng-model="newNonFullSupply.quantityRequested"
                 id="quantityRequested"
                 numeric-validator="positiveInteger" ng-trim="false" maxlength="8"/><br>
            <span class="rnr-form-error" style="display:none;" id="newNonFullSupply.quantityRequested"
                  openlmis-message="error.number.only">
            </span>
        </div>
        <div class="span6">
          <label for="reasonForRequestedQuantity"><span
            ng-bind="labelForRnrColumn('reasonForRequestedQuantity')"></span></label>
          <input type="text" class="span12" ng-model="newNonFullSupply.reasonForRequestedQuantity"
                 id="reasonForRequestedQuantity" maxlength="250"/><br>
            <span class="alert alert-warning warning-alert"
                  ng-show="newNonFullSupply.quantityRequested && !newNonFullSupply.reasonForRequestedQuantity"
                  openlmis-message="error.reason.required">
            </span>
        </div>
        <div class="span2">
          <label>&nbsp;</label>
          <input type="button" href="" id="addNonFullSupply" class="btn btn-primary"
                 ng-click="addNonFullSupplyProductsByCategory()"
                 ng-disabled="shouldDisableAddButton()" openlmis-message="button.add"/>
        </div>
      </div>

      <hr/>

      <div class="product-list" ng-show="addedNonFullSupplyProducts.length">
        <div class="row-fluid" ng-repeat="nonFullSupplyProduct in addedNonFullSupplyProducts">

          <div class="span5">
            <div class="fluid-grid-cell" id="nonFullSupplyProductCodeAndName">
              <label id="nonFullSupplyProductNameLabel"
                     ng-bind="nonFullSupplyProduct.productCode+' | '+nonFullSupplyProduct.productName"></label>
            </div>
          </div>

          <div class="span2">
            <div class="fluid-grid-cell">
              <input id="nonFullSupplyQuantityRequested{{$index}}" type="text"
                     ng-class="highlightRequiredFieldInModal(nonFullSupplyProduct.quantityRequested)"
                     class="right-justified"
                     name="nonFullSupplyProductQuantityRequested{{$index}}"
                     numeric-validator="positiveInteger"
                     ng-required="true" maxlength="8" ng-model="nonFullSupplyProduct.quantityRequested"
                     openlmis-message="placeholder.quantity"/>
                <span class="rnr-form-error" style="display:none;"
                      id="nonFullSupplyProductQuantityRequested{{$index}}" openlmis-message="error.number.only">
                </span>
            </div>
          </div>

          <div class="span4">
            <div class="fluid-grid-cell" id="nonFullSupplyProductReasonForRequestedQuantity">
              <input id="nonFullSupplyRequestedReason" type="text"
                     ng-class="highlightRequiredFieldInModal(nonFullSupplyProduct.reasonForRequestedQuantity)"
                     maxlength="250" ng-required="true"
                     ng-model="nonFullSupplyProduct.reasonForRequestedQuantity"
                     openlmis-message="placeholder.explanation"/>
            </div>
          </div>

          <div class="span1">
            <div class="fluid-grid-cell delete-role">
              <a href="" class="close" value="delete"
                 ng-click="deleteCurrentNonFullSupplyLineItem($index)">&times;</a>
            </div>
          </div>

        </div>
      </div>

    </div>
    <div class="alert alert-danger" id="modalErrorMessage" ng-show="modalError" openlmis-message="modalError"></div>

    <div class="modal-footer">
      <input type="button" id="doneNonFullSupply" class="btn btn-primary"
             ng-click="addNonFullSupplyLineItemsToRnr()"
             openlmis-message="button.done"/>

      <input type="button" id="cancelNonFullSupply" class="btn btn-cancel"
             ng-click="nonFullSupplyProductsModal=false;modalError=''"
             openlmis-message="button.cancel"/>
    </div>
  </div>
</form>
</div>
